<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery.EasyUI-1.5.3后台经典框架使用DEMO(main.jsp)</title>

<link rel="stylesheet" type="text/css"
	href="<%=basePath%>jslib/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>jslib/easyui/themes/icon.css">
<script type="text/javascript"
	src="<%=basePath%>jslib/easyui/jquery.min.js"></script>
<script type="text/javascript"
	src="<%=basePath%>jslib/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="<%=basePath%>jslib/easyui/locale/easyui-lang-zh_CN.js"></script>
	
<style type="text/css">
	a
	{
		text-decoration:none;	
	}

</style>
<script type="text/javascript">
	$(function () {
		bindNavmenuClick();
		loadWelcome();
		
		tabClose();
		tabCloseEven();
 		tt();
	})
	
	
	//tt是绑定tab上的有右键菜单
	function tt() {
		$(".tabs-inner").on('contextmenu', function (e) {
 			console.log("右击了.tabs-inner");
 			e.preventDefault();
			$('#mm').menu('show', {
				left: e.pageX,
				top: e.pageY
			});
			var subtitle =$(this).children("span").text();
			$('#mm').data("currtab",subtitle);
			console.log("bbbb");
			
			return false;
		});
	}
	
	//绑定导航菜单的click事件
	function bindNavmenuClick() {
		$(".navMenu").click( function () {
			var menuTitle = $(this).html();
			var url = $(this).attr("url");
			var tabExists = $("#tabs").tabs("exists",menuTitle);
			if (!tabExists) {
				// 如果页签中没有这个面板，则添加面板
				// $("#tabs").tabs("add", {title:menuTitle, content:getContent(url), closable:true });
				addTabPanel(menuTitle, url, true);
			} else {
				// 如果页签中有这个面板，则打开这个面板
				$("#tabs").tabs("select", menuTitle);
			}
		})
	}
	
	//根据url获取内容
	function getContent(url) {
		/* return "<iframe src='" + url + "' width=100% heigh=100% frameborder='0' />"; */
		return "<iframe src='" + url + "' style='padding:0;margin:0;border:0;width:100%;height:99%;'" + "border='0' />";
	}
	
	//封装addTabPanel
	function addTabPanel(menuTitle, url, canClose) {
		$("#tabs").tabs("add", {title:menuTitle, content:getContent(url), closable:canClose });
		bindfresh(menuTitle);
		tt();
	}
	
	//加载welcome
	function loadWelcome() {
		addTabPanel("首页","welcome.jsp", false)
	}
	
	function bindfresh(title) {
		/*双击刷新TAB选项卡*/
		$(".tabs-inner").dblclick(function() {
			var _ctab = $('#tabs').tabs('getTab', title);
			var html = _ctab.html();
			_ctab.html(html);
			console.log("双击了.tabs-inner");
		});
	}
	
	/**
	 * 注册选项卡事件
	 * @returns
	 */
	function tabClose() {
		$(".tabs-inner").bind('contextmenu',function(e){
			console.log("右击了.tabs-inner");
			e.preventDefault();
			$('#mm').menu('show', {
				left: e.pageX,
				top: e.pageY
			});
			var subtitle =$(this).children("span").text();
			$('#mm').data("currtab",subtitle);
			console.log("aaaa");
			return false;
		});
	}
	
	//绑定右键菜单事件
	function tabCloseEven() {
		//关闭当前
		$('#mm-tabclose').click(function(){
			var currtab_title = $('#mm').data("currtab");
			if(currtab_title != "首页"){
				$('#tabs').tabs('close',currtab_title);
			}
		});
		//刷新当前1
		$('#mm-tabreflush').click(function(){
            var currTab = $('#tabs').tabs('getSelected');
	        var url = $(currTab.panel('options').content).attr('src');
	        $('#tabs').tabs('update', {
	            tab: currTab,
	            options: {
	                content: getContent(url)
	            }
	        });
		});
		//全部关闭
		$('#mm-tabcloseall').click(function(){
			$('.tabs-inner span').each(function(i,n){
				var t = $(n).text();
				if(t != "首页"){
					$('#tabs').tabs('close',t);
				}
			});	
		});
		//关闭除当前之外的TAB
		$('#mm-tabcloseother').click(function(){
			var currtab_title = $('#mm').data("currtab");
			$('.tabs-inner span').each(function(i,n){
				var t = $(n).text();
				if(t != "首页"){
					if(t!=currtab_title){
						$('#tabs').tabs('close',t);
					}
				}
			});	
		});
		//退出
		$('#mm-tabexit').click(function(){
			$('#mm').menu('hide');
			console.log("点击了退出键，隐藏了。");
		});
	}
	
	// 初始化菜单，传入url获得json
	function initmenu(url) {
		
	}

</script>
</head>
<body class="easyui-layout" fit="true" style="overflow-y: hidden">
	
	<!-- 顶部  -->
	<div region='north' split='false'
		style="overflow: hidden; height: 30px; background: url(images/layout-browser-hd-bg.gif) #7f99be repeat-x center 50%; line-height: 20px; color: #fff; font-family: Verdana, 微软雅黑, 黑体">
		<span style="padding-left: 10px; font-size: 16px;"><img
			src="images/blocks.gif" width="20" height="20" align="absmiddle" />后台管理系统</span>
		<span
			style="float: right; padding-right: 20px; margin-top: 2px; vertical-align: middle;"
			class="head"> 欢迎 daixw@ddzxpay.com <a
			href="javascript:void(0)" class="easyui-linkbutton" plain="true"
			icon="icon-edit" onclick="changePwd('99')">修改密码</a> <!-- <a
			href="javascript:void(0)" class="easyui-linkbutton" plain="true"
			icon="icon-undo" onclick="logout()">退出系统</a> -->
			<a href="logout.do" class="easyui-linkbutton" plain="true"	icon="icon-undo">退出系统</a>
		</span>
	</div>
	
	<!-- 底部  -->
	<div region="south" style="overflow: hidden; background: url(../images/main_foot_03.gif) #7f99be repeat-x center 50%; line-height: 30px; height:30px; color: #fff; font-family: Verdana, 微软雅黑, 黑体">
	<div id="time" style="float: right;">2016年12月18日19:45:56 星期日</div>
	<div style="float: left;">左边文字</div>
	<div style="text-align:center;">Copyright &copy; 2016 NEWPAY </div>
	</div>

	<!-- 右边  -->
	<!-- 
	<div
		data-options="region:'east',split:true,title:'右边菜单',iconCls:'icon-save'"
		style="width: 100px;"></div>
	 -->
	 
	<!-- 左边  -->
	<div
		data-options="region:'west',split:true,title:'导航菜单',iconCls:'icon-save'"
		style="width: 150px;">
		<div class="easyui-accordion" data-options="fit:true,border:false">
			<div title="model01" style="overflow:auto;padding:10px;">
				<p><a class="navMenu" href="javascript:void(0)" url="modules/module01/model01-01.jsp" >model01-01</a></p>
				<p><a class="navMenu" href="javascript:void(0)" url="modules/module01/model01-02.jsp" >model01-02</a></p>
				<p><a class="navMenu" href="javascript:void(0)" url="logout.do" >logout</a></p>
			</div>
			<div title="model02" style="overflow:auto;padding:10px;">
				<p><a class="navMenu" href="javascript:void(0)" url="modules/module02/model02-01.jsp" >model02-01</a></p>
				<p><a class="navMenu" href="javascript:void(0)" url="modules/module02/model02-02.jsp" >model02-02</a></p>
			</div>	
			<div title="model03" style="overflow:auto;padding:10px;">
				<p><a class="navMenu" href="javascript:void(0)" url="modules/module02/model02-01.jsp" >model03-01</a></p>
				<p><a class="navMenu" href="javascript:void(0)" url="modules/module02/model02-02.jsp" >model03-02</a></p>
				<p><a class="navMenu" href="javascript:void(0)" url="modules/module02/model02-01.jsp" >model03-03</a></p>
				<p><a class="navMenu" href="javascript:void(0)" url="modules/module02/model02-02.jsp" >model03-04</a></p>
			</div>	
			<div title="model04" style="overflow:auto;padding:10px;">
				<p><a class="navMenu" href="javascript:void(0)" url="modules/module02/model02-01.jsp" >model04-01</a></p>
				<p><a class="navMenu" href="javascript:void(0)" url="modules/module02/model02-02.jsp" >model04-02</a></p>
				<p><a class="navMenu" href="javascript:void(0)" url="modules/module02/model02-01.jsp" >model04-03</a></p>
				<p><a class="navMenu" href="javascript:void(0)" url="modules/module02/model02-02.jsp" >model04-04</a></p>
			</div>	
		</div>
	</div>
	<div data-options="region:'center'">
		<div id="tabs" class="easyui-tabs" fit="true">
		
		</div>
	</div>
	
	<!-- tabs菜单 -->
	<div id="mm" class="easyui-menu" style="width: 132px;">
		<div id="mm-tabclose">关闭</div>
		<div id="mm-tabreflush">刷新</div>
		<div class="menu-sep"></div>
		<div id="mm-tabcloseall">关闭全部</div>
		<div id="mm-tabcloseother">关闭其他</div>
		<div class="menu-sep"></div>
        <div id="mm-tabexit">退出</div>
	</div>
	
</body>
</html>